<html lang="en">
  <head>
    <title>Basic UI translation sample</title>
    
    <!-- these four links define two translation files for different languages. -->
    <link href="lang/ru.tis" hreflang="ru" rel="translation" >
    <link href="lang/en.tis" hreflang="en" rel="translation" >
    <link href="lang/zh.tis" hreflang="zh" rel="translation" >
    
    <style>
      @import url(../lang.css);
      @import url(../../+plus/plus.css);
    </style>
    
    <script type="text/tiscript">
      include "../lang.tis";
      include "../lang-tool.tis";

      namespace Data 
      {
        var test = "First test";
      }
    
      $(select#lang) << event change() { self.language = this.value; }
      //$(button#test) << event click() { this.text="Second test"; }
    </script>
    
  </head>
  <body model="Data">
    <h2>Basic UI translation sample using Lang framework</h2>
    <p>testing &lt;output&gt; bound by +plus</p>
    <fieldset>
      <p><label>UI language</label><include src=lang-selector.htm /></p>
      <hr>
      <output(test) />
      <hr>
      <p>Choose output value</p>
      <button|radio(test) value="First test">#1</button>
      <button|radio(test) value="Second test">#2</button>
    </fieldset>
  </body>
</html>